<template>
  <div class="table">
    <el-table border :data="tableData" size="small">
      <el-table-column label="RefNo" width="75" prop="refNO">
        <template slot-scope="scope">
          <a :href="'/#/viewRequestForm/'+ scope.row.refNO" target="_blank">{{ renderRefNo(scope) }}</a>
        </template>
      </el-table-column>
      <el-table-column label="MainCate" prop="relateCategoryName">
        <template slot-scope="scope">
          <div class="one-line-column-class">{{scope.row.relateCategoryName}}</div>
        </template>
      </el-table-column>
      <el-table-column label="SubCate" prop="relateSubCategoryList">
        <template slot-scope="scope">
          <div class="one-line-column-class">{{scope.row.relateSubCategoryList}}</div>
        </template>
      </el-table-column>
      <el-table-column label="Platform" prop="productionPlatformInvolve">
        <template slot-scope="scope">
          <div class="one-line-column-class">{{scope.row.involvedPlatform}}</div>
        </template>
      </el-table-column>
      <el-table-column label="Subject" prop="changeObjective">
        <template slot-scope="scope">
          <div class="one-line-column-class">{{scope.row.changeObjective}}</div>
        </template>
      </el-table-column>
      <el-table-column label="Requester" prop="requesterDisplayName">
        <template slot-scope="scope">
          <div class="one-line-column-class">{{scope.row.requesterDomainId}}</div>
        </template>
      </el-table-column>
      <el-table-column label="Endorser" prop="endorserArray">
        <template slot-scope="scope">
          <div class="one-line-column-class">{{scope.row.endorserList}}</div>
        </template>
      </el-table-column>
      <el-table-column label="Schedule DateTime" width="140" prop="expectedDate">
        <template slot-scope="scope">
          <div class="one-line-column-class">{{scope.row.scheduleDateTime}}</div>
        </template>
      </el-table-column>
      <el-table-column label="RA Progress" prop="riskAssessmentProgress">
        <template slot-scope="scope">
          <div class="one-line-column-class">{{scope.row.riskAssessmentProgress}}</div>
        </template>
      </el-table-column>
      <el-table-column label="PCRS Status" width="130" prop="requestStatus">
        <template slot-scope="scope">
          <div class="one-line-column-class">{{scope.row.requestStatus}}</div>
        </template>
      </el-table-column>
      <el-table-column label="PCRS Progress">
        <template slot-scope="scope">
          <div class="one-line-column-class">PCRS Progress</div>
        </template>
      </el-table-column>
      <el-table-column label="QA/UAt Testing" prop="testingResult">
        <template slot-scope="scope">
          <div class="two-line-column-class">{{scope.row.testingResult}}</div>
        </template>
      </el-table-column>
      <el-table-column label="PP Trial Run" prop="ppTrialRunResult">
        <template slot-scope="scope">
          <div class="two-line-column-class">{{scope.row.ppTrialRunResult}}</div>
        </template>
      </el-table-column>
      <el-table-column label="Executors" prop="updatedAt">
        <template slot-scope="scope">
          <div class="two-line-column-class">{{scope.row.executors}}</div>
        </template>
      </el-table-column>
      <el-table-column label="1st ver 2nd ver" prop="firstVerifier">
        <template slot-scope="scope">
          <div class="two-line-column-class">{{scope.row.verifier}}</div>
        </template>
      </el-table-column>
      <el-table-column label="Ver Deadline" width="140" prop="verificationDeadling">
        <template slot-scope="scope">
          <div class="one-line-column-class">{{scope.row.verificationDate}}</div>
        </template>
      </el-table-column>
    </el-table>
    <el-container>
      <div class="pagination">
        <el-pagination layout="prev, pager, next" :total="totalElements" :page-size="limit"
                       @current-change="onPageChange">
        </el-pagination>
      </div>
    </el-container>
  </div>
</template>

<script>
import constants from '@/common/js/constants'
import requestFormService from '@/service/requestForm'
import Bus from '@/common/js/eventBus'
import userService from '@/service/user'

export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      totalElements: 0,
      limit: 10,
      searchFilter: []
    }
  },
  created() {
    Bus.$on('reloadRequestFormListByCondition', (condition) => {
      if (condition === constants.REQUEST_FORM_TYPE.VIEW_ALL) {
        this.searchFilter = []
      } else if (condition === constants.REQUEST_FORM_TYPE.VIEW_MY_CONCERN_PCRS) {
        let searchRequesterDomainIdFilter = {
          fieldName: 'requesterDomainId',
          operator: 'EQ',
          value: userService.getUser().requesterDomainId,
          connector: 'OR'
        }
        let searchEndorserListFilter = {
          fieldName: 'endorserList',
          operator: 'LIKE',
          value: userService.getUser().requesterDomainId,
          connector: 'OR'
        }
        let searchFirstVerifierFilter = {
          fieldName: 'firstVerifier',
          operator: 'LIKE',
          value: userService.getUser().requesterDomainId,
          connector: 'OR'
        }
        let searchFirstCoordinatorFilter = {
          fieldName: 'firstCoordinator',
          operator: 'LIKE',
          value: userService.getUser().requesterDomainId,
          connector: 'OR'
        }
        let searchSecondVerifierFilter = {
          fieldName: 'secondVerifier',
          operator: 'LIKE',
          value: userService.getUser().requesterDomainId,
          connector: 'OR'
        }
        let searchCoordinatorFilter = {
          fieldName: 'coordinator',
          operator: 'LIKE',
          value: userService.getUser().requesterDomainId,
          connector: 'OR'
        }

        let searchFilters = []
        searchFilters.push(searchRequesterDomainIdFilter)
        searchFilters.push(searchEndorserListFilter)
        searchFilters.push(searchFirstVerifierFilter)
        searchFilters.push(searchSecondVerifierFilter)
        searchFilters.push(searchFirstCoordinatorFilter)
        searchFilters.push(searchCoordinatorFilter)
        this.searchFilter = searchFilters
      } else {
        this.searchFilter = []
      }

      this.getRequestFormData(1, this.searchFilter)
    })
  },
  async mounted() {
    const loading = this.$loading()
    try {
      await this.getRequestFormData(1, this.searchFilter)
    } catch (error) {
      loading.close()
    }
    loading.close()
  },
  beforeDestroy() {
    Bus.$off('reloadRequestFormListByCondition')
  },
  methods: {
    renderRefNo(scoped) {
      return scoped.row.refNO
    },
    onPageChange(page) {
      this.getRequestFormData(page, this.getFilterCondition())
      this.currentPage = page
    },
    getFilterCondition() {
      return this.searchFilter
    },
    async getRequestFormData(page, filter) {
      let sort = {
        property: 'id',
        direction: 'DESC'
      }

      let response = await requestFormService.getRequestFormWithCondition({
        page: page,
        start: 0,
        limit: this.limit,
        searchFilters: filter,
        sortOrderList: [sort]
      })
      this.tableData = response.content
      this.totalElements = response.totalElements
    }
  }
}
</script>

<style scoped>

  .pagination {
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }

  .two-line-column-class {
    height: 40px;
    width: 100%;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 2; /** 显示的行数 **/
    overflow: hidden; /** 隐藏超出的内容 **/
  }

  .one-line-column-class {
    height: 20px;
    width: 100%;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 1; /** 显示的行数 **/
    overflow: hidden; /** 隐藏超出的内容 **/
  }
</style>
